<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>新增人员</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx!}/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/css/style.css?v=4.1.0" rel="stylesheet">


</head>

<body class="gray-bg">
<form class="form-horizontal m-t" id="updatepersonForm">
    <input type="hidden" id="id" name="id" value="${person.id}">
    <div class="col-md-12">
        <div class="form-group">
            <label class="col-sm-3 control-label">名称：</label>
            <div class="col-sm-9">
                <input type="text" name="name" class="form-control" placeholder="请输入名称" required value="${person.name}">
                <span
                        class="help-block m-b-none">请输入名称</span>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">别名：</label>
            <div class="col-sm-9">
                <input type="text" name="nickname" class="form-control" placeholder="请输入别名" required
                       value="${person.nickname}"> <span
                    class="help-block m-b-none">请输入别名</span>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">身高：</label>
            <div class="col-sm-9">
                <input type="text" name="height" class="form-control" placeholder="请输入身高"
                       value="${person.height}"> <span
                    class="help-block m-b-none">请输入身高</span>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">年龄：</label>
            <div class="col-sm-9">
                <input type="text" name="age" class="form-control" placeholder="请输入年龄"
                       value="${person.age}"> <span
                    class="help-block m-b-none">请输入年龄</span>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">生日：</label>
            <div class="col-sm-9 date" id="birthday">
                <input type="text" name="birthday" class="form-control" value="2014-11-11" value="${person.birthday}">
            </div>

        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-8 col-sm-offset-3">
            <button class="btn btn-primary" type="submit">提交</button>
        </div>
    </div>
</form>


<!-- 全局js -->
<script src="${ctx!}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="${ctx!}/js/content.js?v=1.0.0"></script>
<script src="${ctx!}/js/mine.js"></script>

<!-- jQuery Validation plugin javascript-->
<script src="${ctx!}/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx!}/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx!}/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/js/plugins/layer/laydate/laydate.js"></script>
<!-- Data picker -->
<script src="${ctx!}/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#birthday input').datepicker({});
        $("#updatepersonForm").validate({
            //配置字段验证内容
            //增加两个JS /js/plugins/validate/jquery.validate.min.js  /js/plugins/validate/messages_zh.min.js
            //可参考http://www.runoob.com/jquery/jquery-plugin-validate.html
            rules: {
                name: "required",
                nickname: "required",
                height: {
                    digits: true,
                    maxlength: 3
                },
                age: {
                    digits: true,
                    maxlength: 3
                },
                birthday: {
                    dateISO: true
                }
            },
            messages: {
                name: "请填写名称！",
                nickname: "请填写别名！",
                height: {
                    digits: "必须填入整数！",
                    maxlength: "长度不能打于 3个字符！"
                },
                age: {
                    digits: "必须填入整数！",
                    maxlength: "长度不能打于 3个字符！"
                },
                birthday: {
                    dateISO: "请输入正确的日期格式！"
                }
            },
            submitHandler: function (form) {
                //获取值
                var data = $(form).serialize();
                //防止中文乱码(可写可不写)
                //data= decodeURIComponent(data,true);
                //转化为json
                var postjsondata = DataDeal.formToJson(data);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "${ctx!}/persons/update/" + ${person.id} ,
                    contentType: 'application/json;charset=utf-8',
                    data: postjsondata,
                    success: function (msg) {
                        layer.msg(msg.message, {time: 2000}, function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index);
                        });
                    }
                });
            }
        });
    });
</script>

</body>

</html>